<template>
  <div class="tab-control">
    <tab-control :titles="['衣服','鞋子','裤子']"
    v-on:clickItem="clickItem"></tab-control>
    <!--<tab-control :titles="['流行','新款','精选']"></tab-control>-->
    <h2>{{pageContents[currentIndex]}}</h2>
  </div>
</template>

<script>
  import TabControl from './TabControl.vue'
  export default {
    components: {
      TabControl
    },
    data() {
      return {
        pageContents: ['衣服列表','鞋子列表','裤子列表'],
        currentIndex: 0
      }
    },
    methods: {
      clickItem(index) {
        this.currentIndex = index
        console.log("子组件传递的index是" + index)
      }
    }
  }
</script>

<style scoped>
</style>